<template>
    <view style="height: 100%">
        <!-- mine/pages/integralSubsidiary/integralSubsidiary.wxml -->
        <view>
            <view style="background-color: #F5F7FA;">
                <view class="subsidiary-tabs">
                    <view v-for="(item, index) in subsidiaryTabs" :key="index">
                        <view :class="'subsidiary-tabs-item ' + (index == config.type ? 'active' : 'subsidiary-tabs-item')" @tap="tabsIndex" :data-index="index">{{ item }}</view>
                    </view>
                </view>
                <view class="subsidiary-header">
                    <view class="subsidiary-date">
                        <view class="type" @tap="checkTime">
                            {{ config.createTime }}
                            <image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/static/xiala.png"></image>
                        </view>
                    </view>
                    <view class="subsidiary-status">
                        <view class="operate-status">
                            <view class="operate">增加</view>
                            <view class="operate-value" v-if="positive">+{{ positive }}</view>
                            <view class="operate-value" v-else-if="positive == 0">0</view>
                        </view>
                        <view class="operate-status2">
                            <view class="operate">扣减</view>
                            <view class="operate-value" v-if="negative">-{{ negative }}</view>
                            <view class="operate-value" v-else-if="negative == 0">0</view>
                        </view>
                    </view>
                </view>
                <view v-if="list.length">
                    <view class="integral-list">
                        <view class="integral-list-item" v-for="(item, index) in list" :key="index">
                            <view class="integral-list-item-content">
                                <view class="integral-list-item-children1">
                                    <view class="type" v-if="item.sourceType == 2">成长等级会员</view>
                                    <view class="type" v-if="item.sourceType == 3">付费会员</view>
                                    <view class="type" v-if="item.sourceType == 4">推广</view>
                                    <view class="type" v-if="item.sourceType == 5">充值奖励活动</view>
                                    <view class="type" v-if="item.sourceType == 6">累计消费活动</view>
                                    <view class="type" v-if="item.sourceType == 7">单笔折扣活动</view>
                                    <view class="type" v-if="item.sourceType == 8">站点优惠活动</view>
                                    <view class="type" v-if="item.sourceType == 9">邀请奖励</view>
                                    <view class="type" v-if="item.sourceType == 10">新客有礼</view>
                                    <view class="type" v-if="item.sourceType == 11">多人拼团</view>
                                    <view class="type" v-if="item.sourceType == 12">消耗</view>
                                    <view class="type" v-if="item.sourceType == 13">退款冻结</view>
                                    <view class="type" v-if="item.sourceType == 14">退款核销</view>
                                    <view class="price" v-if="item.type == 1">+{{ item.amount }}</view>
                                    <view v-else>{{ item.amount }}</view>
                                </view>
                                <view class="integral-list-item-children2">
                                    <!-- <view class="integral-num-name">积分:<text class="integral-num"> 20</text></view> -->
                                    <view class="integral-date">{{ item.createTime }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <Upgrading text="暂无内容"></Upgrading>
                </view>
            </view>
        </view>
       <!-- <van-popup :show="showTime" position="bottom" custom-style="width:702rpx;margin:24rpx;border-radius: 16rpx;" @close="onClose">
            <van-datetime-picker type="year-month" :value="currentDate" @input="onInput" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup> -->
		
		<u-datetime-picker :show="showTime" mode="year-month" v-model="currentDate"  :closeOnClickOverlay='true' @close="onClose" @cancel='onCancel' @confirm="onConfirm"  :itemHeight="100"/>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// import vanDatetimePicker from './@vant/weapp/datetime-picker/index';
// import vanPopup from './@vant/weapp/popup/index';
import Upgrading from '../../../components/upgrading/upgrading';
// mine/pages/integralSubsidiary/integralSubsidiary.ts
import { getIntegralDetail, getIntegralSum } from '../../../api/https';
import { formatYMTime } from '../../../utils/util';
import { getIntegralList } from '../../../api/marketing/marketing';
export default {
    components: {
        // vanDatetimePicker,
        // vanPopup,
        Upgrading
    },
    data() {
        return {
            subsidiaryTabs: ['全部', '增加', '扣减'],
            currentIndex: 0,
            showTime: false,
            currentDate: new Date().getTime(),
            MYDCurrentDate: '请选择时间',
            integralList: [],
            startTime: null,
            sTime: null,
            endTime: null,
            type: 2,
            page: 1,
            pageNum: 0,
            positive: 0,
            negative: 0,
            list: [],
            config: {
                current: 1,
                size: 10,
                type: '',
                createTime: formatYMTime(new Date().getTime())
            },
            createTime: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        this.getIntegralList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        this.getIntegralList();
    },
    methods: {
        async getIntegralList() {
            try {
                let res = await getIntegralList(this.config);
                this.config.current++;
                this.setData({
                    list: [...this.list, ...res.data.records]
                });
                this.computedIntegral();
            } catch (error) {}
        },

        tabsIndex(e: any) {
            // console.log(e)
            const tmp = this;
            const {
                currentTarget: {
                    dataset: { index }
                }
            } = e;
            let { config } = this;
            config.type = index || '';
            // if (!config.type) {
            //     this.data.config.createTime = ''
            //     this.setData({
            //         MYDCurrentDate: '请选择时间'
            //     })
            // }
            config.current = 1;
            this.list = [];
            tmp.setData({
                config
            });
            console.log(config);
            this.getIntegralList();
        },

        //选择时间
        checkTime() {
            // console.log(111)
            this.setData({
                showTime: true
            });
        },

        onInput(event: any) {
            this.createTime = formatYMTime(event.detail);
        },

        onCancel() {
            this.setData({
                showTime: false
            });
        },

        onConfirm(e) {
            this.setData({
                showTime: false,
                MYDCurrentDate: formatYMTime(e.value),
                'config.createTime': formatYMTime(e.value)
            });
            this.config.current = 1;
            this.list = [];
            this.getIntegralList();
        },

        IntegralDetail(type: any, index: any) {
            const tmp = this;
            switch (tmp.sTime) {
                case null:
                    tmp.setData({
                        startTime: null
                    });
                    break;
                default:
                    tmp.setData({
                        startTime: tmp.sTime + '-01 00:00:00',
                        endTime: tmp.sTime + '-31 23:59:59'
                    });
                    break;
            }
            getIntegralDetail({
                current: tmp.page,
                size: 10,
                type,
                startTime: tmp.startTime,
                endTime: tmp.endTime
            })
                .then((res: any) => {
                    if (res.code == 0) {
                        // 总数据
                        const total = res.data.total;
                        const pageNum = Math.ceil(total / 10);
                        let integralList;
                        switch (index) {
                            // 全部
                            case 1:
                                integralList = res.data.records;
                                break;
                            // 增加
                            case 2:
                                integralList = res.data.records;
                                break;
                            // 减少
                            case 3:
                                integralList = res.data.records;
                                break;
                            // 页面初始化及上拉加载
                            case 4:
                                integralList = tmp.integralList.concat(res.data.records);
                                break;
                            // 下拉刷新
                            case 5:
                                integralList = res.data.records;
                                uni.hideNavigationBarLoading(); //在标题栏中隐藏加载图标
                                uni.stopPullDownRefresh();
                                break;
                        }
                        tmp.setData({
                            integralList,
                            pageNum
                        });
                        tmp.computedIntegral();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 计算增加和扣减方法
        computedIntegral() {
            let positive = 0;
            let negative = 0;
            this.list.forEach((item: any) => {
                let amount = item.amount || 0;
                if (item.type == 1) {
                    positive += amount;
                }
                if (item.type == 2) {
                    negative -= amount;
                }
            });
            this.setData({
                positive,
                negative
            });
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        // onPullDownRefresh() {
        //   this.data.page = 1
        //   if(this.data.integralList.length){
        //     wx.showNavigationBarLoading(); //在标题栏中显示加载图标
        //     this.IntegralDetail(this.data.type,5)
        //   }
        // },
        integralSum() {
            const tmp = this;
            getIntegralSum({})
                .then((res: any) => {
                    if (res.code == 0) {
                        tmp.setData({
                            negative: res.data.negative,
                            positive: res.data.positive
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        onClose() {
            console.log('占位：函数 onClose 未声明');
        }
    }
}
</script>
<style>
	page{
	    background-color: #F5F7FA;
	}
</style>
<style lang="less" scoped>
	@import "../../../commin/commin.less";
	@import "../../../commin/flex.less";
page{
    background-color:@text-color6; 
}
.subsidiary-tabs{
    display: flex;
    justify-content: space-around;
    align-items: center; 
    .paddings(32rpx,0,32rpx,0);   
    position: fixed;
    top: var(--window-top);
    left: 0;
    right: 0;
    background-color: @text-color6;
    z-index: 999;
    .subsidiary-tabs-item,.active{
        .kuangao(182rpx,64rpx);
        background:@white-color;
        border-radius: 32rpx;
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color3;
        .textalign();
        line-height:64rpx;  
    }
    .active{
        background: rgba(20, 135, 250, 0.06);
        .borders(1rpx,@blue);
        font-weight: bold;
        color:@blue;
    }
}
.subsidiary-header{
    display:flex;
    justify-content: space-between;
    align-items: center;  
    position: fixed;
    width: 100%;
    top: calc(131rpx + var(--window-top));
    right: 0rpx;
    left: 0rpx;
    background-color: @text-color6;
    .subsidiary-date{
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: #18181A;  
        display: flex;
        align-items: center;
        margin-left: 57rpx;
        .type{
            display: flex;
            align-items: center;
            .img{
                .kuangao(25rpx,13rpx);
                margin-left: 24rpx;
            }
        }
    }
    .subsidiary-status{
        margin-right: 77rpx;
        display: flex;
        justify-content: start;
        align-items: center;
        .operate-status,.operate-status2{
            display: flex;
            justify-content: start;
            align-items: center;
            .operate{
                .fontsize(24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;  
            }
            .operate-value{
                .fontsize(30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @blue;  
                margin-left: 18rpx;
            }
        }
        .operate-status2{
            margin-left: 46rpx;    
        }

    }
}

.integral-list{
    width: 100%;
    margin-top: 213rpx;  
    .integral-list-item{
        margin: 0 24rpx;
        background-color: #fff;
        // border-radius: 16rpx;
        padding-top:40rpx;
        .integral-list-item-content{
            margin: 0rpx 32rpx ;
            border-bottom: 1rpx dashed #C0C4CC;
            .integral-list-item-children2{
                margin-bottom:40rpx ;
            }
            .integral-list-item-children1,.integral-list-item-children2{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 25rpx;
                .type{
                    font-size: 30rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #303133;
                }
                .price{
                    font-size: 34rpx;
                    font-family: DIN;
                    font-weight: bold;
                    color: #FC724C;
                }
                .integral-num-name{
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #606266;
                }
                .integral-num{
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #FC724C;
                }
                .integral-date{
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #606266;
                } 

            }
        }
        
    }
    .integral-list-item:nth-child(1){
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
    }
    .integral-list-item:nth-last-child(1){  
        border-bottom-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        .integral-list-item-content{
            border-bottom:none;
            .integral-list-item-children2{
                padding-bottom: 40rpx;
            }
        }

    }
    
}
</style>
